<template>
   <div class="container">
    <div class="header">
      <div class="title">视频监控</div>      
    </div>
    <div class="content">
      <div class="title">
        <div>{{ type }}</div>       
      </div>
      <div class="list">
        <div class="name">
          <img src="../../static/images/down-arrow-blue.png" alt="">
          {{ data.name }}
        </div>
        <div class="list-item" v-for="(firstItem,firstIndex) in data.children" :key="firstIndex">
          <div class="item-name" style="padding: 4px 0px 4px 16px;">
            <img 
              src="../../static/images/down-arrow-gray.png" 
              v-show="firstFlag == firstItem.id"
              @click.stop="firstClick('up', firstItem)"
            >
            <img 
              src="../../static/images/up-arrow-gray.png" 
              v-show="firstFlag != firstItem.id"
              @click.stop="firstClick('down', firstItem)"
            >
            {{ firstItem.name }}
          </div>
          <div class="list-item" v-for="(secondItem,secondIndex) in firstItem.children" :key="secondIndex" v-show="secondFlag == firstItem.id">
            <template v-if="secondItem.children.length">
              <div class="item-name" style="padding: 4px 0px 4px 24px;">
                <img src="../../static/images/down-arrow-gray.png" alt="">
                <!-- <img 
                  src="../../static/images/up-arrow-gray.png" 
                  v-show="secondFlag != secondItem.id"
                  @click.stop="secondClick('down', secondItem)"
                > -->
                {{ secondItem.name }}
              </div>
            </template>
            <template v-else>
              <div class="video-item">
                <div>{{ secondItem.name }}</div>
                <img src="../../static/images/play-icon.png" alt="" @click="handlePlay(secondItem)">
              </div>              
            </template>            
            <div class="list-item" v-for="(thirdItem,thirdIndex) in secondItem.children" :key="thirdIndex">
              <template v-if="thirdItem.children.length">
                <div class="item-name" style="padding: 4px 0px 4px 32px;">
                  <img src="../../static/images/down-arrow-gray.png" alt="">
                  {{ thirdItem.name }}
                </div>
              </template>
              <template v-else>
                <div class="video-item">
                  <div>{{ thirdItem.name }}</div>
                  <img src="../../static/images/play-icon.png" alt="" @click="handlePlay(thirdItem)">
                </div>              
              </template> 
              <div class="video-item" v-for="(fourthItem,fourthIndex) in thirdItem.children" :key="fourthIndex">   
                <div>{{ fourthItem.name }}</div>
                <img src="../../static/images/play-icon.png" alt="" @click="handlePlay(fourthItem)">  
              </div>
            </div>
          </div>          
        </div>
      </div>      
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div>  
  </div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { useRouter,useRoute } from "vue-router";  
  import { 
    videoCategory
  } from "../../utils/apis";

  const router = useRouter();
  const route = useRoute();
  const type = ref("");
  const flag = ref(null);
  const data = ref({});
  
  const firstFlag = ref("");
  const secondFlag = ref("");
  const thirdFlag = ref("");
  const firstClick = (flag,item) => {
    if(flag == "down"){
      firstFlag.value = item.id;
      secondFlag.value = item.id;
    }else{
      firstFlag.value = "";
      secondFlag.value = "";
    }
  };
  const secondClick = (flag,item) => {
    if(flag == "down"){
      secondFlag.value = item.id;
      thirdFlag.value = item.id;
    }else{
      secondFlag.value = "";
      thirdFlag.value = "";
    }
  };

  const handlePlay = (item) => {
    router.push({
      path: "/videoDetails",
      query: {
        id: item.id,
        name: item.name
      }     
    });
  };

  const videoCategoryFn = () => {
    videoCategory(flag.value).then((res) => {
      if(res.code === 200 && res.data){
        data.value = res.data[0].children[0];
      }
    });
  };

  onMounted(() =>{
    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }
    
    if(route.query.type === "navigationlock"){
      type.value = "船闸视频";
      flag.value = 1;
    }else{
      type.value = "水上视频";
      flag.value = 2;
    }    
    videoCategoryFn();
  });
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    overflow-x: hidden;
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
      .title {
        color: #262626;
        font-size: 18px;
        font-weight: 500;
        padding: 12px 0px 10px 20px;
        position: relative;
      }
    }
    .content{
      position: relative;
      background-color: #fff;
      border-radius: 8px;
      margin: 20px;
      padding-bottom: 10px;
      max-height: 500px;
      overflow-y: scroll;
      .title{
        color: #262626;
        font-size: 16px;
        font-weight: 500;
        position: relative;       
        padding: 16px 0px 16px 12px;
        margin: 0px 16px;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        align-items: center;        
      }
      .title::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 50%;
        left: 0;
        height: 16px;
        width: 4px;
        transform: translateY(-50%);
      }
      .list{
        margin: 16px;
        .name{
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: bold;
          color: #2D78ED;
          background-color: #eaf1fd;
          border-radius: 4px;
          padding: 8px 0px 8px 8px;
          margin-bottom: 8px;
        }
        .list-item{         
          .item-name{
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400  ;
            color: #747576;
            background-color: #f8f9fb;
            border: 1px solid #f8f9fb;
            border-radius: 4px;
            // padding: 4px 0px 4px 8px;
            margin-bottom: 4px;
            img{
              width: 18px;
              height: 18px;
            }
          }  
          .video-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #a1a1a1;
            margin: 8px 0px 8px 40px;
            img{
              width: 18px;
              height: 18px;
            }
          }
        }
      }
    }
    .source{
      color: #8C8C8C;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%,-50%);
      .name{
        margin-bottom: 5px;
        text-align: center;
      }
    }
  }
</style>